<route lang="yaml">
meta:
  enabled: false
        </route>

<script lang="ts" setup name="dictPage">
import { ElMessage, ElMessageBox } from 'element-plus'
import DialogForm from '../system/components/dict/dialog.vue'
import DrawerForm from '../system/components/dict/drawer.vue'
import dayjs from '@/utils/dayjs'
import { delById, delByIds, page } from '@/api/dict_header'

const { pagination, getParams, onSizeChange, onCurrentChange, onSortChange } = usePagination()

const tableRef = ref()
const data = ref({
  loading: false,
  // 详情
  formDialogProps: {
    visible: false,
    id: 0,
  },
  formDrawerProps: {
    visible: false,
    id: 0,
  },
  // 搜索
  search: {
    label: '',
    name: '',
    status: '',
  },
  searchMore: false,
  // 批量操作
  batch: {
    enable: true,
    selectionDataList: [],
  },
  // 列表数据
  dataList: [],
})

onMounted(() => {
  getDataPage()
})

onBeforeUnmount(() => {
})
function getDataPage() {
  data.value.loading = true
  const params = getParams() as any
  data.value.search.label && (params.label = data.value.search.label)
  data.value.search.name && (params.name = data.value.search.name)
  data.value.search.status && (params.status = data.value.search.status)
  page(params).then((res) => {
    data.value.loading = false
    data.value.dataList = res.data.list
    pagination.value.total = res.data.total
  })
}

// 每页数量切换
function sizeChange(size: number) {
  onSizeChange(size).then(() => getDataPage())
}

// 当前页码切换（翻页）
function currentChange(page = 1) {
  onCurrentChange(page).then(() => getDataPage())
}

// 字段排序
function sortChange({ prop, order }: { prop: string; order: string }) {
  onSortChange(prop, order).then(() => getDataPage())
}

function onCreate() {
  data.value.formDialogProps.id = 0
  data.value.formDialogProps.visible = true
}

function onEdit(row: any) {
  data.value.formDialogProps.id = row.id
  data.value.formDialogProps.visible = true
}
function onDictItem(row: any) {
  data.value.formDrawerProps.id = row.id
  data.value.formDrawerProps.visible = true
}
function onDel(row: any) {
  ElMessageBox.confirm(`确认删除「${row.name}」吗？`, '确认信息').then(() => {
    delById(row.id).then((res: any) => {
      if (res.code !== 200) {
        ElMessage.error({
          message: res.msg,
          center: true,
        })
      }
      else {
        getDataPage()
        ElMessage.success({
          message: '删除成功',
          center: true,
        })
      }
    })
  }).catch(() => { })
}
function onBatchDel() {
  ElMessageBox.confirm('确认批量删除？', '确认信息').then(() => {
    const ids = data.value.batch.selectionDataList.map((item: any) => item.id)
    delByIds(ids).then((res: any) => {
      if (res.code !== 200) {
        ElMessage.error({
          message: res.msg,
          center: true,
        })
      }
      else {
        getDataPage()
        ElMessage.success({
          message: '删除成功',
          center: true,
        })
      }
    })
  }).catch(() => { })
}
</script>

<template>
  <div>
    <page-main>
      <search-bar show-more @toggle="data.searchMore = $event">
        <el-form :model="data.search" size="default" label-width="100px" label-suffix="：">
          <el-row>
            <el-col :span="8">
              <el-form-item label="标签">
                <el-input
                  v-model="data.search.label" placeholder="请输入标签" clearable @keydown.enter="currentChange()"
                  @clear="currentChange()"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="编码">
                <el-input
                  v-model="data.search.name" placeholder="请输入编码" clearable @keydown.enter="currentChange()"
                  @clear="currentChange()"
                />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="状态">
                <el-radio-group v-model="data.search.status" size="default" @change="currentChange()">
                  <el-radio label="">
                    全部
                  </el-radio>
                  <el-radio label="0">
                    使能
                  </el-radio>
                  <el-radio label="1">
                    关闭
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </search-bar>
      <div class="btn-op-container">
        <batch-action-bar
          v-if="data.batch.enable" :data="data.dataList" :selection-data="data.batch.selectionDataList"
          @check-all="tableRef.toggleAllSelection()" @check-null="tableRef.clearSelection()"
        >
          <el-button size="default" type="danger" @click="onBatchDel">
            批量删除
          </el-button>
        </batch-action-bar>
        <el-button style="margin-left: 10px;" type="primary" size="default" @click="onCreate">
          <template #icon>
            <el-icon>
              <svg-icon name="i-ep:plus" />
            </el-icon>
          </template>
          新增
        </el-button>
        <el-button type="primary" @click="currentChange()">
          <template #icon>
            <el-icon>
              <svg-icon name="i-ep:search" />
            </el-icon>
          </template>
          搜索
        </el-button>
      </div>
      <el-table
        ref="tableRef" v-loading="data.loading" class="list-table" :data="data.dataList" border stripe
        highlight-current-row @sort-change="sortChange" @selection-change="data.batch.selectionDataList = $event"
      >
        <el-table-column v-if="data.batch.enable" type="selection" align="center" fixed />
        <!-- <el-table-column prop="code" label="业务编码" /> -->
        <el-table-column prop="label" label="字典标签" />
        <el-table-column prop="name" label="字典编码" />
        <el-table-column prop="status" label="使能状态">
          <template #default="scope">
            <el-tag v-if="scope.row.status === '0'" type="success" size="small">
              使能
            </el-tag>
            <el-tag v-else type="danger" size="small">
              关闭
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="desc" label="描述" />
        <el-table-column prop="created_at" label="创建时间">
          <template #default="scope">
            {{ dayjs(scope.row.created_at).format('YYYY-MM-DD HH:mm:ss') }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="250" align="center" fixed="right">
          <template #default="scope">
            <el-button type="danger" size="small" plain @click="onDel(scope.row)">
              删除
            </el-button>
            <el-button type="primary" size="small" plain @click="onEdit(scope.row)">
              编辑
            </el-button>
            <el-button type="primary" size="small" plain @click="onDictItem(scope.row)">
              字典值
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="pagination.page" :total="pagination.total" :page-size="pagination.size"
        :page-sizes="pagination.sizes" :layout="pagination.layout" :hide-on-single-page="false" class="pagination"
        background @size-change="sizeChange" @current-change="currentChange"
      />
    </page-main>
    <DialogForm
      v-if="data.formDialogProps.visible === true" :id="data.formDialogProps.id"
      v-model="data.formDialogProps.visible" @success="getDataPage"
    />
    <DrawerForm
      v-if="data.formDrawerProps.visible === true" :id="data.formDrawerProps.id"
      v-model="data.formDrawerProps.visible"
    />
  </div>
</template>

  <style lang="scss" scoped>
  .el-pagination {
    margin-top: 20px;
  }

  .btn-op-container {
    display: flex;
  }
  </style>
